import 'package:flutter/material.dart';

class TabCustomView extends StatefulWidget {
  final List<ITabsListItem> tabs;
  final Color? selectColor;
  final String? fontSize;
  final String? tabHeight;
  const TabCustomView(
      {super.key,
      required this.tabs,
      this.fontSize,
      this.tabHeight,
      this.selectColor});

  @override
  State<TabCustomView> createState() => _TabCustomViewState();
}

class _TabCustomViewState extends State<TabCustomView>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: widget.tabs.length, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        height: double.infinity,
        child: Column(
          children: [
            SizedBox(
              width: double.infinity,
              child: TabBar(
                  splashFactory: NoSplash.splashFactory, // 取消tabs点击波纹效果
                  controller: _tabController,
                  indicatorColor: Theme.of(context).primaryColor,
                  tabs: widget.tabs.map((e) => TabIcon(item: e)).toList()),
            ),
            Divider(height: 1),
            Expanded(
                child: TabBarView(
                    controller: _tabController,
                    children:
                        widget.tabs.map((e) => TabsContent(item: e)).toList()))
          ],
        ));
  }
}

/// tabItem项组件
class TabIcon extends StatelessWidget {
  final ITabsListItem item;
  const TabIcon({super.key, required this.item});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        spacing: 6,
        children: [Icon(item.icon), Text(item.title)],
      ),
    );
  }
}

/// tabContent项组件
class TabsContent extends StatelessWidget {
  final ITabsListItem item;
  const TabsContent({super.key, required this.item});

  @override
  Widget build(BuildContext context) {
    return Container(
        alignment: Alignment.center,
        width: double.infinity,
        color: item.color,
        child: Column(
          children: [
            Icon(
              item.icon,
              size: 50, // 图标大小
            ),
            Text(
              item.title,
              style: TextStyle(fontSize: 40, fontWeight: FontWeight.w800),
            ),
            Text(
              item.content,
              style: TextStyle(fontSize: 40, fontWeight: FontWeight.w400),
            ),
          ],
        ));
  }
}

/// tabsList接口
class ITabsListItem {
  late String title;
  late IconData icon;
  late String content;
  late Color? color;

  ITabsListItem(String title, IconData icon, String content,
      {Color? color = const Color.fromARGB(255, 59, 202, 202)}) {
    this.title = title;
    this.icon = icon;
    this.content = content;
    this.color = color;
  }
}
// 1. Expanded组件，占满主轴剩余空间
// 2. SizedBox组件，设置固定宽高
// 3. Container组件.设置宽高及背景颜色等
//
